---
title: Modal | gluestack-ui | Installation, Usage, and API

description: Highlight key information or actions with a window that overlays content for focused interaction.
pageTitle: Modal

pageDescription: Highlight key information or actions with a window that overlays content for focused interaction.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Overlay/Modal" />

import {
  Modal,
  ModalBackdrop,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter,
  Button,
  ButtonText,
  ButtonIcon,
  Center,
  Text as ModalText,
  CloseIcon,
  VStack,
  HStack,
  Heading,
  Icon,
  Input,
  InputField,
  Link,
  LinkText,
  ArrowLeftIcon,
  CircleIcon,
  CopyIcon,
  Box,
  TrashIcon,
  Radio,
  RadioIndicator,
  RadioIcon,
  RadioLabel,
  RadioGroup,
  Pressable,
  Image
} from '../../core-components/nativewind';
import { CreditCard } from 'lucide-react-native';
import { transformedCode } from '../../utils';
import { useState } from 'react';
import {
  CodePreview,
  Table,
  TableContainer,
  AddIcon,
  InfoIcon,
  InlineCode,
  Tabs
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';

This is an illustration of **Modal** component.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
        function App(){
          const [showModal, setShowModal] = React.useState(false);
          const ref = React.useRef(null);
          return (
            <Center className='h-[300px]'>
              <Button onPress={() => setShowModal(true)} ref={ref}>
                <ButtonText>Show Modal</ButtonText>
              </Button>
              <Modal
                isOpen={showModal}
                onClose={() => {
                  setShowModal(false);
                }}
                finalFocusRef={ref}
                {...props}
              >
                <ModalBackdrop />
                <ModalContent>
                  <ModalHeader>
                    <Heading size="md" className="text-typography-950">
                      Invite your team
                    </Heading>
                    <ModalCloseButton >
                      <Icon as={CloseIcon} size="md"
                className="stroke-background-400 group-[:hover]/modal-close-button:stroke-background-700 group-[:active]/modal-close-button:stroke-background-900 group-[:focus-visible]/modal-close-button:stroke-background-900"/>
                    </ModalCloseButton>
                  </ModalHeader>
                  <ModalBody>
                    <Text size="sm" className="text-typography-500">
                      Elevate user interactions with our versatile modals. Seamlessly
                      integrate notifications, forms, and media displays. Make an impact
                      effortlessly.
                    </Text>
                  </ModalBody>
                  <ModalFooter>
                    <Button
                      variant="outline"
                      action="secondary"
                      onPress={() => {
                        setShowModal(false);
                      }}
                    >
                      <ButtonText>Cancel</ButtonText>
                    </Button>
                    <Button
                      onPress={() => {
                        setShowModal(false);
                      }}
                    >
                      <ButtonText>Explore</ButtonText>
                    </Button>
                  </ModalFooter>
                </ModalContent>
              </Modal>
            </Center>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Wrapper,
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalCloseButton,
        ModalBody,
        ModalFooter,
        useState,
        CloseIcon,
        Button,
        ButtonText,
        Heading,
        Center,
        Text: ModalText,
        Icon,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['xs', 'sm', 'md', 'lg', 'full'],
          default: 'md',
        },
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add modal
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/modal @legendapp/motion
```
> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper.

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/modal/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Modal } from '@/components/ui/modal';
```

<AnatomyImage mobileUrl='https://i.imgur.com/XMrIaFD.png' webUrl='https://i.imgur.com/y2wTaq8.png' classNameStyle='aspect-[513/697] md:aspect-[736/405]' />

```jsx
export default () => (
  <Modal>
    <ModalBackdrop />
    <ModalContent>
      <ModalHeader>
        <ModalCloseButton></ModalCloseButton>
      </ModalHeader>
      <ModalBody />
      <ModalFooter />
    </ModalContent>
  </Modal>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Modal

Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<Wrapper>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the modal will open. Useful for controllable state behavior.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`() => any`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Callback invoked when the modal is closed.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModal</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, renders react-native native modal.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultIsOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Specifies the default open state of the Modal`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>initialFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the modal opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>finalFocusRef</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`React.RefObject<any>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The ref of element to receive focus when the modal closes`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>avoidKeyboard</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the Modal will avoid the keyboard.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>closeOnOverlayClick</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the Modal will close when the overlay is clicked.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isKeyboardDismissable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, the keyboard can dismiss the Modal`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>children</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>any</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The content to display inside the Modal`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</Wrapper>

#### ModalBackdrop

It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.

#### ModalContent

It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>focusable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true, Modal Content will be focusable.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### ModalHeader

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### ModalCloseButton

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### ModalBody

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component

#### ModalFooter

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

### Accessibility

We have outlined the various features that ensure the Modal component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).

### Props

Modal component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.

#### Modal

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>size</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>xs | sm | md | lg | full</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>md</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

### Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

#### Multiple Modals

A user interface featuring multiple modal components that allow for layered interaction and context-specific information display.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App() {
          const [showModal, setShowModal] = React.useState(false);
          const [showModal2, setShowModal2] = React.useState(false);
          const [showModal3, setShowModal3] = React.useState(false);
          return (
            <>
              <Button onPress={() => setShowModal(true)}>
                <ButtonText>Forgot password?</ButtonText>
              </Button>
              <Modal
                isOpen={showModal}
                onClose={() => {
                  setShowModal(false);
                }}
              >
                <ModalBackdrop />
                <ModalContent>
                  <ModalHeader className="flex-col items-start gap-0.5">
                    <Heading>Forgot password?</Heading>
                    <Text size="sm">No worries, we’ll send you reset instructions</Text>
                  </ModalHeader>
                  <ModalBody className="mb-4">
                    <Input>
                      <InputField placeholder="Enter your email" />
                    </Input>
                  </ModalBody>
                  <ModalFooter className="flex-col items-start">
                    <Button
                      onPress={() => {
                        setShowModal2(true);
                      }}
                      className="w-full"
                    >
                      <ButtonText>Submit</ButtonText>
                    </Button>
                    <Button
                      variant="link"
                      size="sm"
                      onPress={() => {
                        setShowModal(false);
                      }}
                      className="gap-1"
                    >
                      <ButtonIcon as={ArrowLeftIcon} />
                      <ButtonText>Back to login</ButtonText>
                    </Button>
                  </ModalFooter>
                </ModalContent>
              </Modal>
              <Modal
                isOpen={showModal2}
                onClose={() => {
                  setShowModal2(false);
                }}
              >
                <ModalBackdrop />
                <ModalContent>
                  <ModalHeader className="flex-col items-start gap-0.5">
                    <Heading>Reset password</Heading>
                    <Text size="sm">
                      A verification code has been sent to you. Enter code below.
                    </Text>
                  </ModalHeader>
                  <ModalBody className="mb-4">
                    <Input>
                      <InputField placeholder="Enter verification code" />
                    </Input>
                  </ModalBody>
                  <ModalFooter className="flex-col items-start">
                    <Button
                      onPress={() => {
                        setShowModal3(true);
                      }}
                      className="w-full"
                    >
                      <ButtonText>Continue</ButtonText>
                    </Button>
                    <Text size="sm" className="">
                      Didn’t receive the email?
                      <Link className="">
                        <LinkText
                          size="xs"
                          className="text-typography-700 font-semibold"
                        >
                          Click to resend
                        </LinkText>
                      </Link>
                    </Text>
                    <HStack space="xs" className="items-center">
                      <Button
                        variant="link"
                        size="sm"
                        onPress={() => {
                          setShowModal2(false);
                        }}
                        className="gap-1"
                      >
                        <ButtonIcon as={ArrowLeftIcon} />
                        <ButtonText>Back to login</ButtonText>
                      </Button>
                    </HStack>
                  </ModalFooter>
                </ModalContent>
              </Modal>
              <Modal
                isOpen={showModal3}
                onClose={() => {
                  setShowModal3(false);
                }}
              >
                <ModalBackdrop />
                <ModalContent>
                  <ModalHeader className="flex-col items-start gap-0.5">
                    <Heading>Set new password</Heading>
                    <Text size="sm">
                      Almost done. Enter your new password and you are all set.
                    </Text>
                  </ModalHeader>
                  <ModalBody className="" contentContainerClassName="gap-3">
                    <Input>
                      <InputField placeholder="New password" />
                    </Input>
                    <Input>
                      <InputField placeholder="Confirm new password" />
                    </Input>
                  </ModalBody>
                  <ModalFooter className="flex-col items-start">
                    <Button
                      onPress={() => {
                        setShowModal(false);
                        setShowModal2(false);
                        setShowModal3(false);
                      }}
                      className="w-full"
                    >
                      <ButtonText>Submit</ButtonText>
                    </Button>
                    <Button
                      variant="link"
                      size="sm"
                      onPress={() => {
                        setShowModal3(false);
                      }}
                      className="gap-1"
                    >
                      <ButtonIcon as={ArrowLeftIcon} />
                      <ButtonText>Back to login</ButtonText>
                    </Button>
                  </ModalFooter>
                </ModalContent>
              </Modal>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalCloseButton,
        ModalBody,
        ModalFooter,
        Wrapper,
        useState,
        Button,
        ButtonText,
        ButtonIcon,
        Text: ModalText,
        CloseIcon,
        VStack,
        HStack,
        Heading,
        Icon,
        Input,
        InputField,
        Link,
        LinkText,
        ArrowLeftIcon,
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Onboarding Message

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App() {
        const [showModal, setShowModal] = React.useState(false);
        return (
          <>
            <Button onPress={() => setShowModal(true)}>
              <ButtonText>Dashboard</ButtonText>
            </Button>
            <Modal
              isOpen={showModal}
              onClose={() => {
                setShowModal(false);
              }}
            >
              <ModalBackdrop />
              <ModalContent className="max-w-[375px]">
                <Image
                  source={{
                    uri: 'https://s3-alpha-sig.figma.com/img/699b/4163/a76185f77e8785f5dd5b8ab61c92aa5c?Expires=1722211200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=prgL91-UWtjpEALlOeixZRZA-J6IQ0ltBJBsVxMCLLckr6q~nS39Q3afbbUZVMU53bae2kwUzxLqrowQEkSFgqjHofoZeayW4B0HYFzxFXwep20vUtGUdGQRM5KINMBKVSht2vA1qIAz8uo26q7ECgDPDImgUa4GNBByKDsErzMwU7RoUz-v2EkM238BToy8wyWDPeJG3eqydV9dQuL7ExJLlYBIBO0hqouyVrPp9dclvm6K~bhZiehddcR7DW~~57~~4F7g~osk0SFtqRIIlS-smuRlxPKigT4Gds8D8T2uC-VSyCgJ7ZEqtb~MT2jpeUAjVWXjT5vzAQg-dFdSUw__',
                  }}
                  alt="image"
                  className="h-[185px] w-full rounded"
                />
                <ModalBody className="mb-5" contentContainerClassName="">
                  <Heading size="md" className="text-typography-950 text-center">
                    Welcome to the dashboard
                  </Heading>
                  <Text size="sm" className="text-typography-500 text-center">
                    We are glad to have you on board, Here are some quick tips to let
                    you up and running.
                  </Text>
                </ModalBody>
                <ModalFooter className="w-full">
                  <Button
                    variant="outline"
                    action="secondary"
                    size="sm"
                    onPress={() => {
                      setShowModal(false);
                    }}
                    className="flex-grow"
                  >
                    <ButtonText>Skip</ButtonText>
                  </Button>
                  <Button
                    onPress={() => {
                      setShowModal(false);
                    }}
                    size="sm"
                    className="flex-grow"
                  >
                    <ButtonText>Next</ButtonText>
                  </Button>
                </ModalFooter>
              </ModalContent>
            </Modal>
          </>
        );
      };
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalBody,
        ModalFooter,
        Wrapper,
        useState,
        Button,
        ButtonText,
        ButtonIcon,
        Text: ModalText,       
        Heading,
        Image
      },
      argsType: {},
    }}
  />
</Wrapper>

#### Delete Post

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App() {
        const [showModal, setShowModal] = React.useState(false);
        return (
          <>
            <Button onPress={() => setShowModal(true)}>
              <ButtonText>Delete Post</ButtonText>
            </Button>
            <Modal
              isOpen={showModal}
              onClose={() => {
                setShowModal(false);
              }}
            >
              <ModalBackdrop />
              <ModalContent className="max-w-[305px] items-center">
                <ModalHeader>
                  <Box className="w-[56px] h-[56px] rounded-full bg-background-error items-center justify-center">
                    <Icon as={TrashIcon} className="stroke-error-600" size="xl" />
                  </Box>
                </ModalHeader>
                <ModalBody className="mt-0 mb-4">
                  <Heading size="md" className="text-typography-950 mb-2 text-center">
                    Delete blog post
                  </Heading>
                  <Text size="sm" className="text-typography-500 text-center">
                    Are you sure you want to delete this post? This action cannot be
                    undone.
                  </Text>
                </ModalBody>
                <ModalFooter className="w-full">
                  <Button
                    variant="outline"
                    action="secondary"
                    size="sm"
                    onPress={() => {
                      setShowModal(false);
                    }}
                    className="flex-grow"
                  >
                    <ButtonText>Cancel</ButtonText>
                  </Button>
                  <Button
                    onPress={() => {
                      setShowModal(false);
                    }}
                    size="sm"
                    className="flex-grow"
                  >
                    <ButtonText>Delete</ButtonText>
                  </Button>
                </ModalFooter>
              </ModalContent>
            </Modal>
          </>
        );
      };
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalBody,
        ModalFooter,
        Wrapper,
        useState,
        Button,
        ButtonText,
        Text: ModalText,
        Heading,
        Icon,
        Box,
        TrashIcon,
      },
      argsType: {},
    }}
  />
</Wrapper>
{/* 
#### Choose Payment Mode

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App() {
        const paymentOptions = [
          {
            value: 'visa',
            cardText: 'Visa ending with 1234',
            expiryText: 'Expiry 06/2028',
            imagePath: require('../../../public/images/visa.svg'),
          },
          {
            value: 'mastercard',
            cardText: 'MasterCard ending with 1234',
            expiryText: 'Expiry 08/2028',
            imagePath: require('../../../public/images/master_card.svg'),
          },
          {
            value: 'amex',
            cardText: 'Amex ending with 5678',
            expiryText: 'Expiry 05/2032',
            imagePath: require('../../../public/images/gpay.svg'),
          },
        ];
        const [showModal, setShowModal] = React.useState(false);
        const [values, setValues] = React.useState(paymentOptions[0].value);
        return (
          <>
            <Button onPress={() => setShowModal(true)}>
            <ButtonText>Payment method</ButtonText>
          </Button>
          <Modal
            isOpen={showModal}
            onClose={() => {
              setShowModal(false);
            }}
          >
            <ModalBackdrop />
            <ModalContent className="max-w-[356px]">
              <ModalHeader className="flex-col items-start">
                <Box className="w-[56px] h-[56px] rounded-full bg-background-50 items-center justify-center mb-3">
                  <Icon
                    as={CreditCard}
                    className="stroke-background-900"
                    size="xl"
                  />
                </Box>
                <Heading size="md" className="text-typography-950">
                  Choose your payment method
                </Heading>
                <Text size="sm" className="text-typography-500">
                  Update your plan payment details.
                </Text>
              </ModalHeader>
              <ModalBody className="grow-0">
                <RadioGroup className="gap-3" value={values} onChange={setValues}>
                  {paymentOptions.map((option) => (
                    <Radio
                      key={option.value}
                      value={option.value}
                      aria-label={option.value}
                      size="sm"
                      className="rounded border border-outline-100 justify-between p-4 gap-5 data-[checked=true]:border-outline-500"
                    >
                      <HStack className="gap-3 items-center">
                        <Image
                          source={option.imagePath}
                          alt="image"
                          className="h-5 w-8"
                        />
                        <VStack>
                          <Text size="xs">{option.cardText}</Text>
                          <Text size="xs" className="text-typography-500">
                            {option.expiryText}
                          </Text>
                        </VStack>
                      </HStack>
                      <RadioIndicator>
                        <RadioIcon as={CircleIcon} />
                      </RadioIndicator>
                    </Radio>
                  ))}
                </RadioGroup>
              </ModalBody>
              <ModalFooter className="w-full flex-1">
                <Button
                  variant="outline"
                  action="secondary"
                  size="sm"
                  onPress={() => {
                    setShowModal(false);
                  }}
                  className="flex-grow"
                >
                  <ButtonText>Cancel</ButtonText>
                </Button>
                <Button
                  onPress={() => {
                    setShowModal(false);
                  }}
                  size="sm"
                  className="flex-grow"
                >
                  <ButtonText>Confirm</ButtonText>
                </Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
          </>
        );
      };
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalCloseButton,
        ModalBody,
        ModalFooter,
        Wrapper,
        useState,
        Button,
        ButtonText,
        ButtonIcon,
        Text: ModalText,
        CloseIcon,
        VStack,
        HStack,
        Heading,
        Icon,
        Input,
        InputField,
        Link,
        LinkText,
        ArrowLeftIcon,
        Box,
        Radio,
        RadioIndicator,
        RadioIcon,
        RadioLabel,
        RadioGroup,
        CreditCard,
        CircleIcon,
        require,
      },
      argsType: {},
    }}
  />
</Wrapper> */}


#### Invite Friends to Project

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App() {
          const [showModal, setShowModal] = React.useState(false);
          return (
            <>
              <Button onPress={() => setShowModal(true)}>
                <ButtonText>Invite</ButtonText>
              </Button>
              <Modal
                isOpen={showModal}
                onClose={() => {
                  setShowModal(false);
                }}
              >
                <ModalBackdrop />
                <ModalContent className="max-w-[395px]">
                  <ModalHeader className="gap-2 items-start">
                    <VStack className="gap-1">
                      <Heading size="md" className="text-typography-950">
                        Invite your team
                      </Heading>
                      <Text size="sm" className="text-typography-500">
                        You have created a new project! Invite colleagues to collaborate
                        on this project.
                      </Text>
                    </VStack>
                    <ModalCloseButton>
                      <Icon as={CloseIcon} className="stroke-background-500" />
                    </ModalCloseButton>
                  </ModalHeader>
                  <ModalBody
                    className="mb-0"
                    contentContainerClassName="gap-4 space-between flex-row items-center"
                  >
                    <Input variant="outline" size="sm" className="flex-1">
                      <InputField placeholder="join.untitledui.com/personalproject" />
                    </Input>
                    <Pressable className="h-9 w-9 justify-center items-center border border-outline-300 rounded">
                      <Icon as={CopyIcon} className="stroke-background-800" />
                    </Pressable>
                  </ModalBody>
                </ModalContent>
              </Modal>
            </>
          );
        };
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        Modal,
        ModalBackdrop,
        ModalContent,
        ModalHeader,
        ModalCloseButton,
        ModalBody,
        ModalFooter,
        Wrapper,
        useState,
        Button,
        ButtonText,
        Text: ModalText,
        CloseIcon,
        VStack,
        Heading,
        Icon,
        Input,
        InputField,
        Pressable,
        CopyIcon
      },
      argsType: {},
    }}
  />
</Wrapper>
